<template>
   <div class="Lazyload-Componet">
      <div v-infinite-scroll="loadMore"
           infinite-scroll-disabled="busy"
           infinite-scroll-distance="350"
      >
         <div v-if="displayloading">
            <img src="../../../static/loading-svg/loading-spinning-bubbles.svg" alt="">
            <p>数据正在拼命加载 ~~~</p>
         </div>
         <div v-else>
            <p>数据加载完成 ~~~</p>
         </div>
      </div>
   </div>
</template>

<script>
   import MFooter from '../../base/meizu-footer-wrap/meizu-footer-wrap'
   import {mapGetters, mapMutations} from 'vuex'

   export default {
      name: 'lazyloadComponet',
      data() {
         return {
            busy: true,
            firstClosure: true,
            datalength: null,
            getRequest: false,
            displayloading: true,
            displayloadings: true,
            datalength: 0
         }
      },
      props: {
         CommodityDisplayData: {
            type: Array,
            required: true,
            default() {
               return []
            }
         }
      },
      computed: {
         CommodityDisplay() {
            return this.CommodityDisplayData
         }
      },
      mounted() {
         if (this.CommodityDisplayData.length) {
            this.busy = false
         }
      },
      methods: {
         loadMore() {
            if (this.getRequest) {
               this.busy = true
               this.$emit('lazyLoad')
               this.getRequest = false
               this.datalength++
            }
         },
         RequestOpen() {
            this.busy = false
         },
         RequestClose() {
            console.log('执行')
            this.displayloading = false
            this.busy = true
         },
         ...mapMutations({
            _setIsloading: 'lazyLoad'
         })
      },
      components: {
         MFooter
      },
      watch: {
         CommodityDisplay: {
            handler(newVal) {
               this.getRequest = true
            },
            immediate: true,
            deep: true
         }
      }
   }
</script>

<style scoped lang="stylus">
   .Lazyload-Componet
      div
         display flex
         justify-content center
         align-items center
         height 50px
         width 100%
         p
            margin-left 40px
</style>
